<template>
  <div class="following-item row no-wrap">
    <q-img class="col-4 q-mr-md right-shadow">
      <img v-if="user.banner" style="width:100%;height:100%;object-fit:cover" :src="user.banner" />
      <div class="absolute-full" style="padding:0; background-color:rgba(0,0,0,0.6)">
        <div class="row items-center fit user-info no-wrap q-ml-md">
          <q-btn round size="16px" color="primary" :ripple="false">
            <q-avatar size="44px">
              <img :src="user.avatar" />
            </q-avatar>
          </q-btn>
          <div class="column q-ml-md">
            <div class="username">{{ user.name }}</div>
            <div class="info">{{ user.followersCount }} Followers · {{ user.videosCount }} Uploads</div>
          </div>
        </div>
      </div>
    </q-img>
    <div class="row items-center justify-center q-mx-md" style="width:150px">
      <q-btn
        rounded
        outline
        :label="user.isFollowed ? 'Following' : 'Follow Back'"
        no-caps
        :text-color="user.isFollowed ? 'sub' : 'accent'"
      />
    </div>
    <div class="row no-wrap items-center justify-center q-gutter-x-sm" style="width: 200px">
      <q-btn dense icon="mdi-share-variant" text-color="sub" />
      <q-btn dense :icon="user.isPinned ? 'mdi-pin-off' : 'mdi-pin'" text-color="sub" />
      <q-btn dense icon="mdi-dots-horizontal" text-color="sub" flat />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue';
import User from 'src/models/User';
export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
  setup () {
    return {};
  },
});
</script>
<style lang="sass" scoped>

.following-item
  width: 100%
  height: 64px
  background-color: #1c1c1c
  .basic-info
    background-color: red
  .description
    font-size: 14px
    color: $sub
  .user-info
    .username
      font-size: 18px
    .info
      font-size: 12px
      color: #B7B7B7
.right-shadow
  box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, .32)
</style>